<template>
  <div>
    <!-- flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex; justify-content: center" id="divOne">
      <el-card style="width: 400px; height: 400px">
        <div slot="header" class="clearfix">
          <h2>
            <span style="color: white; margin-left: 60px">银桥装饰材料有限公司</span>
          </h2>
          <br />
          <h3 style="color: white; margin-left: 122px">BMP管理系统</h3>
        </div>

        <table>
          <tr>
            <td style="color: white">賬戶</td>
            <td>
              <el-input v-model="user.account" placeholder="请输入用户名" id="input3"></el-input>
            </td>
          </tr>
          <br />
          <tr>
            <td style="color: white">密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"
                id="input4"></el-input>
            </td>
          </tr>
          <br />
          <tr>
            <td colspan="2" style="padding-left: 45px">
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button><br /><br />
              <el-button type="text" @click="dialogFormVisible = true" style="padding-left: 120px">忘记密码？</el-button>

              <el-dialog title="请输入您的信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" style="width: 300px" id="input1"
                      placeholder="请输入您的账号"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.number" autocomplete="off" style="width: 300px" id="input2"
                      placeholder="请输入电话号码"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" :label-width="formLabelWidth">
                    <el-input v-model="form.yanzheng" autocomplete="off" style="width: 300px" id="inputOne"
                      placeholder="请输入验证码"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="form.password" autocomplete="off" style="width: 300px"
                      id="input5" placeholder="请输入新的密码"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="form.passwordagin" autocomplete="off" style="width: 300px"
                      id="input6" placeholder="请再次确认您的新密码"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="fasong">发送验证码</el-button>
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="queding">确 定</el-button>
                </div>
              </el-dialog>
            </td>
          </tr>
        </table>

        <div style="padding: 15px; margin-left: 85px">
          <span class="spanOne" @click="guanyu">关于我们 </span>
          <span>-------</span><span class="spanTwo" @click="bangzhu">帮助中心</span>
        </div>
      </el-card>
      <div style="margin-top: 620px; color: white">
        <h2>建筑施工BPM管理系统精准助力企业提质增效</h2>
        <br />

        <h3>体验Experience | 整合Intergration | 创新Innovation</h3>
        <br />
        <h4 style="margin-left: 140px">服务电话：400-2828-9673</h4>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      user: {
        account: "",
        password: "",
        //为了登录方便，可以直接在这里写好用户名和密码的值
      },
      dialogTableVisible: false,
      dialogFormVisible: false,

      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "180px",
    };
  },
  methods: {
    submitForm () {
      this.$axios({
        method: "post",
        url: "/login",
        data: { account: this.user.account, password: this.user.password },
      })
        .then((res) => {
          this.$cookies.set("oatoken", res.data.data.token, "7d");
          this.$router.push("/message");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    queding () {
      if (this.form.name == "" || this.form.number == "") {
        document.getElementById("input1").style.border =
          "rgb(221,0,27) 1px solid";
        document.getElementById("input2").style.border =
          "rgb(221,0,27) 1px solid";
        alert("账号或手机号不能为空");
      } else if (
        this.form.name != "" &&
        this.form.number != "" &&
        this.form.yanzheng == ""
      ) {
        alert("请输入验证码");
        document.getElementById("inputOne").style.border =
          "rgb(221,0,27) 1px solid";
      } else if (this.form.password == "" || this.form.passwordagin == "") {
        alert("请输入您的密码");
        document.getElementById("input5").style.border =
          "rgb(221,0,27) 1px solid";
        document.getElementById("input6").style.border =
          "rgb(221,0,27) 1px solid";
      } else if (this.form.password != this.form.passwordagin) {
        alert("两次密码不一致");
        document.getElementById("input5").style.border =
          "rgb(221,0,27) 1px solid";
        document.getElementById("input6").style.border =
          "rgb(221,0,27) 1px solid";
      } else {
        alert("您已成功修改密码！");
        window.location.reload();
      }
    },

    fasong () {
      if (this.form.name == "" || this.form.number == "") {
        document.getElementById("input1").style.border =
          "rgb(221,0,27) 1px solid";
        document.getElementById("input2").style.border =
          "rgb(221,0,27) 1px solid";
        alert("账号或手机号不能为空");
      } else if (this.form.name != "" || this.form.number != "") {
        alert("验证码已发送");
      }
    },

    doLogin () {
      //一点击登录按钮，这个方法就会执行

      var params = new URLSearchParams();
      params.append("account", this.user.account);
      params.append("password", this.user.password);
      this.$axios
        .post("/login", params)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            console.log("登陆成功");
            this.$router.push("/home/index");
            let user = {
              ...res.data.data.employee,
            };
            sessionStorage.setItem("employee", JSON.stringify(user));
            sessionStorage.setItem("token", res.data.token);
          } else if (this.user.account == "" || this.user.password == "") {
            document.getElementById("input3").style.border =
              "rgb(221,0,27) 1px solid";
            document.getElementById("input4").style.border =
              "rgb(221,0,27) 1px solid";
            alert("账号或密码不能为空");
          } else {
            alert("账号或密码错误");
          }
          console.log(res);
        });
    },

    bangzhu () {
      window.location.href = "http://privacy.baidu.com/policy";
    },
    guanyu () {
      window.location.href =
        "https://passport.baidu.com/static/passpc-account/html/protocal.html";
    },
  },
};
</script>


<style scoped lang="less">
#divOne {
  width: 100%;
  height: 750px;
  background-image: url(../assets/u19.png);
  background-repeat: np-repeat;
  background-size: 100% 100%;
  position: relative;
}
body {
  margin: 0;
  padding: 0;
}
.el-card {
  width: 400px;
  height: 300px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid white;
  position: absolute;
  left: 36%;
  top: 22%;
}

.input {
  width: 200px;
  height: 30px;
  border: none;
  border-radius: 5%;
}
.spanOne {
  color: white;
}
.spanOne:hover {
  color: rgb(102, 177, 255);
  border-bottom: 2px rgb(102, 177, 255) solid;
}
.spanTwo {
  color: white;
}
.spanTwo:hover {
  color: rgb(102, 177, 255);
  border-bottom: 2px rgb(102, 177, 255) solid;
}
</style>
